<template>
  <div>
    <el-container class="mailModule-warp">
      <el-aside width="200px">
        <left @findAll="_findAll" ref="findAll"></left>
      </el-aside>
      <el-container>
        <el-main>
          <v-content ref="findAllConent"></v-content>
        </el-main>
        <el-footer height="100px" style="text-align: left;">
          <el-button type="primary" icon="el-icon-edit" @click="_edit">编辑</el-button>
        </el-footer>
      </el-container>
    </el-container>
    <edit ref="edit" @edit="_UpdateFindAll" ></edit>
  </div>
</template>
<script>
export default {
  data() {
    return {
      contentItem: {}
    }
  },
  methods: {
    _edit() {
      this.$refs.edit.showModule(this.contentItem);
    },
    _findAll(item) {
      this.contentItem = item
      this.$refs.findAllConent._context(item)
    },
    _UpdateFindAll(){
      this.$refs.findAll.findAlls()
    }
  },
  components: {
    left: resolve => require(["./mailModule-left.vue"], resolve),
    "v-content": resolve =>
      require(["./mailModule-content.vue"], resolve),
    edit: resolve => require(["./mailModule-edit.vue"], resolve)
  }
};  
</script>

<style lang="stylus">
.mailModule-warp {
  border: 1px solid rgb(238, 238, 238);
  // position: absolute;
  // top: 50px;
  // bottom: 0;
  // right 20px;
  // left 20px;
  .el-aside {
    border-right: 1px solid rgb(238, 238, 238);
  }
}
</style>
